<template name="headers">
	<view class='status-bar' :style="{'background': backgroundColor,height: (bar_Height + 44) + 'px'}">
		<view class="tabar" :style="{'padding-top': bar_Height + 'px'}" v-show="!show_title">
			<view class="textView">
				<text :style="{'color': titleColor}">{{title}}</text>
			</view>
		</view>
		<view class="tabar" :style="{'padding-top':bar_Height + 'px'}" v-show="!show_bol">
			<view class='GoBack' @click='goBack' v-if="!GoBackWhite">
				<image src='../static/images/back.png' style='width:22rpx;height:36rpx;'></image>
			</view>
			<view :class="['GoBack',{'GoBackWhite': GoBackWhite}]" @click='goBack' v-if='GoBackWhite'>
				<image src='../static/images/back2.png' style='width:22rpx;height:36rpx;'></image>
			</view>
			<view class="textView">
				<text :style="{'color': titleColor}">{{title}}</text>
			</view>
		</view>
	</view>

</template>

<script lang='ts'>
	import {
		Component,
		Vue,
		Prop,
		Watch,
		Emit,
		Ref,
	} from 'vue-property-decorator';
	const mdCode = require('../utils/md5.js');
	const desCode = require('../utils/aesUtil.js');
	const api_js = require("../utils/api.js");
	var app = getApp();

	// 一定要加 @Component 装饰器，否则小程序生命周期会报错失效
	@Component({
		name: 'headers',
	})
	export default class App extends Vue {
		// 初始化数据
		// 公共public，私有private与受保护protected的修饰符
		// 一般来说，在TypeScript里，成员都默认为public。
		bar_Height: number = wx.getSystemInfoSync().statusBarHeight;
		
		@Watch('bar_Height')
		  onChildChanged(newValue: number, oldValue: number) {
		    console.log(newValue, "newValue");
		    console.log(oldValue, "oldValue");
		}

		// 设置标题
		@Prop({
			default: '',
			// 注：属性的类型后面需要加上undefined 类型；或者在属性名后面加上!，表示非null 和 非undefined的断言，否则编译器会给出错误提示；
		}) title!: string
		// 编译为:
		// 		title: { 
		// 			type: String,
		// 			default: ''
		// 		},

		// 控制返回箭头是否显示
		@Prop({
			default: false
		}) show_bol: Boolean | undefined
		// 编译为:
		// 		show_bol: { 
		// 			type: Boolean,
		// 			default: false
		// 		},
		@Prop({
			default: false
		}) show_logo!: Boolean

		@Prop({
			default: false
		}) show_title!: Boolean

		@Prop({
			default: 'transparent'
		}) backgroundColor!: String

		@Prop({
			default: ''
		}) titleColor!: String

		@Prop({
			default: false
		}) GoBackWhite!: Boolean
		onLoad() {

		};
		goBack() { // 返回事件
			wx.navigateBack({
				delta: 1,
			})
		};
	}
</script>


<style>
	/* 顶部导航 */

	.status-bar {
		width: 100%;
		z-index: 15;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		background: transparent;
		height: 65px;
	}

	.tabar {
		width: 100%;
		color: #000;
		text-align: center;
		height: 44px;
		position: relative;
		box-sizing: content-box;
	}


	.textView {
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tabar text {
		color: #000;
		font-size: 34rpx;
		font-family: PingFangSC, PingFangSC-Medium;
		font-weight: 500;
	}

	.goBack {
		position: absolute;
		bottom: 0;
		left: 20rpx;
		width: 134rpx;
		height: 64rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 32rpx;
		border: 1rpx solid rgba(0, 0, 0, 0.08);
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0 20rpx;
	}



	.GoBack {
		position: absolute;
		bottom: 0;
		left: 12rpx;
		width: 134rpx;
		height: 44px;
		/* background: rgba(255, 255, 255, 0.6); */
		border-radius: 32rpx;
		text-align: left;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		/* justify-content: center; */
	}

	.GoBack.GoBackWhite {
		background: transparent;
	}


	.xian {
		width: 2rpx;
		height: 37rpx;
		background: rgba(0, 0, 0, 1);
		opacity: 0.2;
	}
</style>
